<template>
  <el-input
    placeholder="请输入内容"
    v-model="searchItem"
    @keyup.enter.native="search"
    @focus="focus"
    @blur="blur"
  >
    <i slot="suffix" class="el-input__icon el-icon-search" v-if="isFocus" @click="search"></i>
    <i slot="prefix" class="el-input__icon el-icon-search" v-else></i>
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      searchItem: "",
      isFocus: false
    };
  },
  methods: {
    search() {
      console.log(`search:${this.searchItem}`);
    },
    focus() {
      this.isFocus = true;
    },
    blur() {
      setTimeout(() => {
        this.isFocus = false;
      }, 200);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>